<template>
    <div class="guide-lines">
        <div :class="['guide-line', `guide-line_${item}`]" v-for="item in guideLines" :key="item" :style="lineStyle(item)"></div>
    </div>
</template>

<script>
export default {
    props: {
        currentItem: Object,
        linesOption: Object
    },
    data() {
        return {
            guideLines: ['top', 'right', 'bottom', 'left']
        }
    },
    methods: {
        // 辅助线样式
        lineStyle(item) {
            if (!this.currentItem || !this.linesOption) return null;
            const { width, height } = this.currentItem;
            const { top, left } = this.linesOption;
            if (item === 'top') {
                return { top: `${top}px`, width: `${this.canvasWidth}px` }
            } else if (item === 'right') {
                return { left: `${left + width}px`, height: `${this.canvasHeight}px` }
            } else if (item === 'bottom') {
                return { top: `${top + height}px`, width: `${this.canvasWidth}px` }
            } else if (item === 'left') {
                return { left: `${left}px`, height: `${this.canvasHeight}px` }
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.guide-lines{
    .guide-line{
        position: absolute;
        background: #F56C6C;
        overflow: hidden;
        border: none;
        z-index: 1000;
        &.guide-line_top{
            top: 0;
            width: 100%;
            height: 1px;
        }
        &.guide-line_right{
            right: 0;
            height: 100%;
            width: 1px;
        }
        &.guide-line_bottom{
            bottom: 0;
            width: 100%;
            height: 1px;
        }
        &.guide-line_left{
            left: 0;
            height: 100%;
            width: 1px;
        }
    }
}
</style>
